import type { ProFormInstance } from '@ant-design/pro-components';
import {
  ProCard,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import { Image, message } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { getInterfaceInfoByIdUsingGet } from '@/services/api-share-backhend/interfaceInfoController';
import { useParams } from 'react-router';
import { history } from '@umijs/max';
import { ProFormDigit } from '@ant-design/pro-form/lib';
import { addApplyInterfaceInfoUsingPost } from '@/services/api-share-backhend/applyInterfaceInfoController';

const ApplyInterface: React.FC = () => {
  const formRef = useRef<ProFormInstance>();
  const params = useParams();
  const [interfaceMes, setInterfaceMes] = useState<API.InterfaceInfo>();
  const [applyParam, setApplyParam] = useState();

  const getData=async ()=>{
    const res=await getInterfaceInfoByIdUsingGet({ id: params.id });
    if (res.data === null || res.data === undefined) {
      history.push('/404');
    } else {
      setInterfaceMes(res.data);
    }
  }

  useEffect( () => {
    getData()
  }, []);



  const handleApplyInterface = async (reqParamPart) => {
    console.log(reqParamPart)
    if (reqParamPart !== undefined) {
      let reqParam = {
        ...reqParamPart,
        interfaceId: params.id,
      };
      console.log(reqParam);
      try {
        const res = await addApplyInterfaceInfoUsingPost({ ...reqParam });
        if (res.data === null || res.data === undefined) {
          message.error(res.message);
          history.push('/error');
        } else {
          history.replace('/success');
        }
      } catch (e) {
        history.replace('/error');
      }
    } else {
      message.error('参数错误');
    }
  };

  if (interfaceMes !== undefined)
    return (
      <ProCard>
        <StepsForm<{
          name: string;
        }>
          formRef={formRef}
          onFinish={() => {
            const value2 = formRef.current?.getFieldsValue();
            let reqParamPart={
              ...applyParam,
              ...value2,
            }
            // 上面如果是set是异步操作，需要等他加载完
            handleApplyInterface(reqParamPart);
            return true
          }}
          formProps={{
            validateMessages: {
              required: '此项为必填项',
            },
          }}
        >
          <StepsForm.StepForm<{
            name: string;
          }>
            name="base"
            title="填写信息"
            stepProps={{
              description: '填写申请信息',
            }}
            onFinish={() => {
              const value1 = formRef.current?.getFieldsValue();
              setApplyParam({ ...value1 });
              return true;
            }}
            initialValues={{
              name: interfaceMes.name,
            }}
          >
            <ProFormText
              name="name"
              label="接口名称"
              width="md"
              tooltip="接口名不可修改"
              rules={[{ required: true }]}
              disabled={true}
            />
            <ProFormDigit
              label={'申请数量'}
              name={'applyNum'}
              min={0}
              max={2000}
              placeholder={'申请数量在0-2000之间'}
              precision={0}
              rules={[{ required: true, message: '请输入申请数量' }]}
            />
            <ProFormTextArea
              name="reason"
              label="申请理由"
              width="lg"
              placeholder="请输入申请理由"
              rules={[{ required: true, message: '请输入申请理由' }]}
            />
          </StepsForm.StepForm>
          <StepsForm.StepForm<{
            checkbox: string;
          }>
            name="checkbox"
            title="todo 暂未实现！付款"
            stepProps={{
              description: '请扫码付款',
            }}
          >
            <div style={{ textAlign: 'center', marginBottom: 24 }}>
              <Image
                width={200}
                src="/pay.png" // 替换为你的二维码图片 URL
                alt="扫码付款"
              />
            </div>
            <ProFormText
              name="payerName"
              label="付款人姓名"
              rules={[{ required: true, message: '请输入付款人姓名' }]}
            />
          </StepsForm.StepForm>
        </StepsForm>
      </ProCard>
    );
};

export default ApplyInterface;
